<template>
  <div class="user-profile-page">
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
      title="个人信息"
    ></van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" center @click="show = true">
        <van-image slot="default" fit="cover" round :src="user.photo" />
      </van-cell>
      <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @cancel="onCancel"
      />

      <van-cell is-link title="昵称" :value="user.name" @click="showName=true" />
<van-popup v-model="showName" position="right" :style="{ height: '100%', width:'100%' }">
<van-nav-bar
  title="编辑昵称"
  left-text="返回"
  right-text="提交"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
<van-field v-model="value" :placeholder="user.name" />
</van-popup>

<van-cell is-link title="简介" :value="user.intro||'未填写'" @click="showIntro=true" />
<van-popup v-model="showIntro" position="right" :style="{ height: '100%', width:'100%' }">
<van-nav-bar
  title="编辑简介"
  left-text="返回"
  right-text="提交"
  left-arrow
  @click-left="onClickLeftintro"
  @click-right="onClickRightintro"
/>
<van-field v-model="intro" :placeholder="user.intro||'未填写'" />
</van-popup>

    </van-cell-group>
    <van-cell-group style="margin-top: 12px">
      <van-cell is-link title="性别" :value="user.gender === 0 ? '男' : '女'" @click="genderShow=true"/>
      <van-action-sheet v-model="genderShow" :actions="actionGender" @select="onSelectGender"  cancel-text="取消" />
      <van-cell is-link title="生日" :value="user.birthday" @click="feteShow=true"/>
    <van-popup v-model="feteShow" position="bottom" :style="{ height: '40%' }" >
        <van-datetime-picker
  v-model="currentDate"
  type="date"
  title="选择年月日"
  :min-date="minDate"
  :max-date="maxDate"
   @confirm="onConfirm"
   @cancel='feteShow = false'
/>

      </van-popup>
    </van-cell-group>
    <div class="logout">
      <span @click="tuichu">退出登录</span>
    </div>
  </div>
</template>

<script>
import { userProfile, userBianji } from '@/api/user'
import { delToken } from '@/utils/storage'
import { Toast } from 'vant'
export default {
  name: 'HomeFourthUser',
  data () {
    return {
      user: {},
      genderShow: false,
      actionGender: [{ name: '男' }, { name: '女' }],

      show: false,
      feteShow: false,
      showName: false,
      name: '',
      showIntro: false,
      intro: '',
      minDate: new Date(1990, 0, 1),
      maxDate: new Date(2035, 10, 1),
      currentDate: new Date(),
      actions: [{ name: '拍照' }, { name: '本地选择' }],
      value: ''
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    //   修改性别
    async onSelectGender (value) {
      const gender = value.name === '男' ? 0 : 1
      console.log(gender)
      await userBianji({ gender })
      //   console.log(res)
      this.getUserInfo()
      this.$toast.success('更新成功')
      this.genderShow = false
    },
    async onConfirm (date) {
    //   console.log('用户选择的日期为：', date)
      const date1 = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
      //   console.log(date1)
      await userBianji({ birthday: date1 })
      //   console.log(res)
      this.getUserInfo()
      this.$toast.success('更新成功')
      // 将选中的日期作为参数传入回调函数，并在这里处理日期数据
      //   console.log(this.data.format('YYYY-MM-DD'))
      this.feteShow = false
    },

    // 获取用信息
    async getUserInfo () {
      const res = await userProfile()
      this.user = res.data
      this.currentDate = new Date(res.data.birthday)
      console.log(res)
    },
    tuichu () {
      this.$dialog
        .confirm({
          title: '温馨提示',
          message: '亲,你确定要退出吗'
          // theme: 'round-button'
        })
        .then(() => {
          // on confirm
          //   删token
          delToken()
          this.$router.push('/login')
          this.$toast.success('退出登录')
        })
        .catch(() => {
          // on cancel
        })
    },
    onCancel () {
      //   console.log('取消')
      this.show = false
      Toast('取消')
    },
    // 关闭编辑昵称
    onClickLeft () {
      this.showName = false
      this.value = ''
    },
    // 修改昵称
    async onClickRight () {
      console.log('修改昵称')
      console.log(this.value)
      await userBianji({ name: this.value })
      //   console.log(res)
      this.getUserInfo()
      this.$toast.success('更新成功')
      this.showName = false
      this.value = ''
    },
    // 关闭编辑简介
    onClickLeftintro () {
      this.showIntro = false
      this.intro = ''
    },
    // 修改简介
    async onClickRightintro () {
      console.log('修改简介')
      await userBianji({ intro: this.intro })
      this.getUserInfo()
      this.$toast.success('更新成功')
      this.showIntro = false
      this.intro = ''
    }
  }
}
</script>

<style lang="less" scoped>
.user-profile-page {
  background: #f8f8f8;
  .van-image {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
  }
  .van-cell__title {
    width: 50px;
    flex: none;
  }
}
.logout {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
}
</style>
